<template>
  <div class="change-passowrd">
    <div class="input-box">
      <div class="input-title">原密码</div><br/>
      <input type="text" name="old_password" ref="oldPassword">
    </div>
        <div class="input-box">
      <div class="input-title">新密码</div><br/>
      <input type="text" name="new_password" ref="newPassword">
    </div>

    <div class="submit-box flex">
      <div class="submit-btn" @click="findPassword">修改</div>
      <router-link tag="div"  class="cancel-btn" :to="{name: 'MineIndex'}">取消</router-link>
    </div>
  </div>
</template>

<script>
import { findPassword } from '__SERVICE__/user.js'
import { SAVE_USER_INFO } from '__STORE__/operation-type'
export default {
  name: 'ChangePassowrd',
  methods: {
    async findPassword() {
      const { nickname } = this.$store.state.user.aliveUserInfo
      const { access_token } = this.$store.state.user.deadUserInfo
      const thisRef = this.$refs
      const oldPassword = thisRef['oldPassword'].value
      const newPassword = thisRef['newPassword'].value
      const result = await findPassword({
        vertify: nickname, oldPassword, newPassword,
        access_token
      })
      this.$store.dispatch(SAVE_USER_INFO, {
        access_token: result.data.access_token
      })
      this.$Notice.success({title: '操作', desc: '密码修改成功', duration: 3000})
    }
  },
  mounted() {

  }
}
</script>

<style lang="less">
 .change-passowrd {
   margin-top: 1rem;
   .input-box {
     margin: 0.5rem 0;
     .input-title {
       display: inline-block;
        padding: 0.25rem 0.15rem;
        border-bottom: 2px solid black;
        color: black;
        border-radius: 50%;
     }
     input {
       width: 20rem;
       margin-top: 0.5rem;
       border-color: #6a6a6a;
       border-width: 2px;
       line-height: 2.25rem;
       font-size: 1.25rem;
       border-radius: 2.5px;
     }
   }

     //提交盒子
  .submit-box {
    margin: 2rem 0 1.5rem;
    .submit-btn, .cancel-btn {
      width: 4rem;
      padding: 0.5rem 1rem;
      text-align: center;
      border-radius: 2.5px;
      color: white;
      cursor: pointer;
    }
    .submit-btn {
      margin-right: 1rem;
      background-color: black;
    }
    .cancel-btn {
      background-color:red;
    }
  }
 }

 @media(max-width: 768px) {
  .change-passowrd {
    .input-box {
      display: block;
      width: 90%;
      margin: auto;
      input {
        width: 100%;
        line-height: 2.5rem;
      }
    }

    .submit-box {
      width: 90%;
      margin: 1rem auto;
    }
  }
 }
</style>